<template>
    <div class="search-results">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(article, index) in list" :key="index" :title="article.title" />
      </van-list>
    </div>
</template>

<script>
import { getSearchResult } from '@/api/search.js'
export default {
  name: 'SearchResults',
  data () {
    return {
      list: [], // 通过 获取搜索结果 接口 拿到的数据 用于渲染页面
      loading: false, // loading=true 显示"加载中..."
      finished: false, // finished=true 显示"没有更多了..."
      page: 1,
      perpage: 10
    }
  },
  props: {
    searchText: {
      type: String,
      required: true
    }
  },
  methods: {
    async onLoad () {
      // 1.获取数据
      try {
        const { data } = await getSearchResult({ //  获取搜索结果 接口
          page: this.page,
          per_page: this.perpage,
          q: this.searchText
        })
        const arr = data.data.results

        // 2.将数据更新到列表中去渲染
        this.list.push(...arr)

        // 3. 将结果渲染到面板后,设置加载状态结束
        this.loading = false

        // 4.判断所有数据是否加载完毕
        if (arr.length) {
          this.page++
          // console.log(9988) // 未懂
        } else {
          this.finished = true // 没有数据了，将加载状态设置结束，不再 onLoad
        }
      } catch (err) {
        // 加载失败了. loading 也要关闭
        this.loading = false
        console.log('错误了 搜索结果组件渲染')
      }
    }
  }
}
</script>

<style>

</style>
